<template>
  <div>
    <el-form ref="searchForm" :inline="true" :model="searchData" class="ele-form-search">
      <el-form-item>
        <el-select v-model="searchData.serialno" placeholder="请选择设备" filterable clearable style="width:240px">
          <el-option
            v-for="(item,index) in devices"
            :key="index"
            :label="`${item.product.name.substr(0,3)} —— ${item.name}`"
            :value="item.serialno"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="searchData.gdate"
          type="daterange"
          range-separator=" ~ "
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button class="ele-btn-icon" icon="el-icon-search" type="primary" @click="search">查询</el-button>
        <el-button type="default" @click="reset('searchForm')">重置</el-button>
        <el-button type="success" @click="showReComputed('searchForm')">重新计算</el-button>
        <!-- <el-button type="success" icon="el-icon-download" style="float:right;" @click="download">导出数据</el-button> -->
      </el-form-item>
    </el-form>
    <el-dialog
      v-loading="loading"
      title="重新计算"
      :visible.sync="dialogVisible"
      width="540px"
      @close="result = false"
    >
      <el-form :inline="true" :model="computedData" class="demo-form-inline">
        <el-form-item label="日期范围">
          <el-date-picker
            v-model="computedData.daterange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确定</el-button>
        </el-form-item>
      </el-form>
      <el-result v-if="result" icon="success" title="操作成功" sub-title="数据已重新处理完毕">
        <template slot="extra">
          <el-button type="primary" size="medium" @click="result = false">返回</el-button>
        </template>
      </el-result>
    </el-dialog>
  </div>
</template>

<script>
import { dclassCodeMap } from '@/utils/constant'
import { weatherDaily } from '@/api/remote'
export default {
  props: {
    serialno: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      result: false,
      computedData: {
        daterange: []
      },
      searchData: {
        serialno: '',
        gdate: ''
      },
      devices: this.$store.getters.devices.filter(val => {
        return +val.product_type === dclassCodeMap.qxz
      })
    }
  },
  watch: {
    serialno: {
      handler(newVal) {
        if (newVal) {
          this.searchData.serialno = newVal
        }
      },
      immediate: true
    }
  },
  methods: {
    search() {
      this.$emit('search', this.searchData)
    },
    reset() {
      this.$emit('reset')
    },
    download() {
      this.$emit('download', this.searchData)
    },
    showReComputed() {
      this.dialogVisible = true
    },
    onSubmit() {
      if (this.computedData.daterange.length < 2) {
        this.$message.error('请选择正确的日期范围')
        return false
      }
      this.loading = true
      const params = {
        from: this.computedData.daterange[0],
        to: this.computedData.daterange[1],
        serialno: this.serialno
      }
      weatherDaily(params).then((res) => {
        this.$message.success(res.msg)
        this.loading = false
        this.result = true
      }).catch((err) => {
        this.loading = false
        this.$message.error(err.message)
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
